<template>
  <div class="history">
    <div v-if="isShow" id="hide" class="history-header">
      <p id="history-text">{{ $_t('search.history', '历史记录') }}</p>
      <div id="del" @click="clearStorage">
        <rt-icon name="rt-base-delete" size="14" color="#ccc"></rt-icon>
        <span style="color:#ccc;font-size: 14px;">清空</span>
      </div>
    </div>
    <div v-if="isShow" class="history-content">
      <p
        v-for="(item, index) in options"
        :key="index"
        @click="historyClick(item)"
      >
        {{ item }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchCampaignHistory',
  // filters: {
  //   conentFilter(value) {
  //     if (!value) return '';
  //     if (value.length > 25) {
  //       return value.slice(0, 25) + '...';
  //     }
  //     return value;
  //   }
  // },
  props: {
    options: Array,
    model: String
  },
  data() {
    return {
      isShow: false
    };
  },
  watch: {},
  // 查询本地缓存
  created() {
    var hisLength = 'campaign-history';
    var arr = localStorage.getItem(hisLength);
    if(arr == null || arr == undefined) {
        arr = [];
    }
    if (arr.length > 2) {
      this.isShow = true;
    }
  },
  mounted() {},
  methods: {
    // 清理本地缓存
    clearStorage() {
      this.isShow = false;
      let _element = document.querySelector('.history');
      setTimeout(() => {
        this.options.splice(0, this.options.length);
        localStorage.setItem(
          'campaign-history',
          JSON.stringify(this.options)
        );
      }, 500);
    },
    // 点击本地缓存图标
    historyClick(queryValue) {
      this.$emit('click', queryValue);
    }
  }
};
</script>

<style lang="less" scoped>
.history {
  background: #fff;
  padding: 15px 11px;
  margin-top: 12px;
  height: 100%;
  position: relative;
  border-radius: 12px 12px 5px 5px;

  // 标题样式
  #history-text {
    font-size: 16px;
    color: #222;
    line-height: 1;
    font-weight: bold;
  }

  // 删除按钮的样式
  #del {
    position: absolute;
    right: 11px;
    top: 15px;
  }

  // // 小瑞推荐文章的样式
  // .account-item {
  //   // table-layout: fixed;
  //   display: table;
  //   font-weight: 500;
  //   background: #f7f8fa;
  //   font-size: 12px;
  //   color: #222;
  //   padding: 5px 13px;
  //   // border-radius: 14px;
  //   margin: 10px 10px 10px 0;
  //   border-radius: 2px;
  // }
}

.fade-out {
  animation: fadeOut 0.5s;
  -webkit-animation: fadeOut 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.history-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 10px;

  & > p {
    font-weight: 500;
    background: #f7f8fa;
    font-size: 12px;
    color: #222;
    padding: 5px 13px;
    border-radius: 14px;
    margin: 1px 10px 10px 0;
    border-radius: 2px;
  }

  .no-history {
    padding-top: 40%;
    text-align: center;
    margin: 0 52px;
    position: relative;
    height: 182px;

    img {
      width: 100%;
      height: 100%;
    }

    & > p {
      position: absolute;
      text-align: center;
      color: #b4bdcf;
      width: 100%;
      font-size: 13px;
      bottom: 50px;
      line-height: 1;
    }
  }
}
</style>
